<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.6.8/angular.min.js"></script>
  </head>
  <body>
    <div ng-app="myApp" ng-controller="myCtrl">
      <h1>{{indexName}}</h1>
      <!-- 自定义组件 -->
      <hello>
        <world></world>
      </hello>
    </div>

    <script>
      var app = angular.module("myApp", []);
      app.controller("myCtrl", function ($scope) {
        $scope.indexName = "主页";
        
      });
      app.component("hello", {
        template: `
            <div>
                <h2>我是hello</h2>
                <div ng-transclude><div>
            </div>
        `,
        controller: function ($scope) {
          const world = document.getElementById("world");
          console.log(world);
          this.$postLink = function () {
            console.log("$postLink");
            const world = document.getElementById("world");
            console.log(world);
          };
        },
        transclude:true
      });

      app.component("world", {
        template: `
            <div>
                <h2 id="world">我是world</h2>
            </div>
        `
      });
    </script>
  </body>
</html>
